import React, { useEffect, useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import "./home.css"
import { Container } from 'react-bootstrap';
import ArticleList,{ArticleItem} from '../../components/layout/ArticleList';
import blogservice from '../../services/blogservice';
import moment from 'moment';
import { PopupDialog } from '../../components/common';

// this page will show the company news/articles.
function Home() {

  const [articles,setArticles] = useState<Array<any>>([]);

  useEffect(()=>{
    console.debug("home")
      blogservice.loadArticles().then((resp:any)=>{
        let articles = (resp.content.records||[]).map((item:any,index:number)=>{
            return {
                ...item,
                createtime:moment.unix(item.createtime).format("yyyy-MM-DD HH:mm:SS"),
                isDraft:item.status === 0,
                isSelected:false,
            }
        })
          setArticles(articles);
      }).catch((err)=>{
          PopupDialog.showBsError(err);
      })
  },[])

  return (
    <Container fluid id="homepage" className='box'>
      <Container fluid className="d-flex flex-column m-0 p-0 content">
        <ArticleList articles={articles} onPressItem={(idx:number,item?:ArticleItem)=>{
             item && window.open(item.url)
        }} onPressLink={(url)=>{
            window.open(url)
        }}/>
        </Container>
        <Container fluid className='d-flex flex-row flex-wrap footer'>
          <a className='footerLeftLink' href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023013382号</a>
          <div className='footerDiv'>
                <a className='footerLink' target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030602007474" >
                  <img className='footerIcon' src="./assets/beian.png"/>
                      <p className='footerGrayText'>粤公网安备 44030602007474号</p>
                </a>
          </div>
        </Container>
    </Container>
  );
}

export default Home;
